﻿<h3 class="tab">
    <a href="#">Popular <span class="meta">Tags</span></a></h3>
<ol class="popular-tags group">
        <div data-bind='template: { name: "Tags-template", foreach: listTags}'
    id="list-tags"></div>
</ol>
<div class="ad-top-wrap">
    <div class="ad thedeck target">
        <a href="#" class="flag">Advertising here</a>
    </div>
</div>
<h3 class="tab">
    <a href="#">Popular <span class="meta">Books</span></a>
</h3>
<ol class="buckets group">
    <div data-bind='template: { name: "shortBook-template", foreach: listShortBook}'
    id="list-shortBook" />

</ol>
<h3 class="tab"><a href="#">Popular <span class="meta">Users</span></a></h3>
<ol class="players-list">
<div data-bind='template: { name: "Users-template", foreach: listUsers}'
    id="list-users" />	
</ol>
<script id='Tags-template' type="text/html" >
 <li class="tag">
 <a data-bind="attr: { href: '/ContentTags/details/'+ id}" rel="tag">
    <span data-bind="text: tagName"></span> 
 </a>
 </li>
</script>

<script id='Users-template' type="text/html" >
    <li class="group">
		
		<h4 class="vcard">
			<a data-bind="attr: { href: '/Account/Index/'+ id}" class="url" length="18" rel="contact">
            <img  class="photo fn" data-bind="attr: {src: userAvatar,alt: displayName}" > <span data-bind="text: displayName"/></a>
			
			
			<span class="user-meta">
				<strong><span data-bind="text: noOfBook"></span> </strong> books
				
			</span>
		</h4>
	</li>
	
</script>
<script id='shortBook-template' type="text/html" >
     <li class="group">
     <a  data-bind="attr: { href: '/books/details/'+ id}">
     <span class="bucket-img">
            <img data-bind="attr: {src: coverImage,alt:title}" />    </span>
            <strong> <span data-bind="text: title"/></strong> 
            <span class="bucket-meta"><span data-bind="text: numberOfViews"></span> views</span>
            <span class="bucket-meta">uploaded: 
            <span data-bind="text: uploadedDateString"/> 
            </span> 
      </a></li>
</script>
<script type="text/javascript">

    function ContentTag(id, name) {
        return {
            id: id,
            tagName: name
        };
    }   
    
    function User (id, userAvatar,displayName,noOfBook) {
        return {
            id: id,
            userAvatar: userAvatar,
            displayName: displayName,
            noOfBook: noOfBook
        };
    }
</script>
